<template>
	<view class="container">
		<view class="main">
			<view class="content-a" v-if="status  == 1">
				<view class="title-content">
					<view class="a cc">
						您对司机本次配送满意吗？
					</view>
					<view class="b cc">
						已对司机匿名
					</view>
				</view>
				<view class="class-ui">
					<view class="flag">
						<view class="f">
							{{statusCar[rowCard.type]}}
						</view>
					</view>
					<view class="class-ko">
						<view class="hj">
							{{rowCard.vehiclesCode ?rowCard.vehiclesCode :'-'}}
						</view>
						<view class="hj-l">
							司机: {{rowCard.driverName ?rowCard.driverName :'-'}}
						</view>
					</view>
				</view>

				<view class="xinghao">
					<view class="content-xing">
						<view class="left">
							<view class="class-text">
								配送效率
							</view>
							<van-rate v-model="formData.deliveryEfficiency" :size="18" color="#1973F7"
								@change="onChange($event,1)" void-icon="star" void-color="#eee" />
						</view>
						<view class="tetxde">
							{{result[formData.deliveryEfficiency]}}
						</view>
					</view>
					<view class="content-xing">
						<view class="left">
							<view class="class-text">
								服务态度
							</view>
							<van-rate v-model="formData.serviceAttitude" :size="18" color="#1973F7"
								@change="onChange($event,2)" void-icon="star" void-color="#eee" />
						</view>
						<view class="tetxde">
							{{result[formData.serviceAttitude]}}
						</view>
					</view>
				</view>
				<view class="clasdsa">
					<textarea @input="inputproposal" v-model="formData.proposal" class="dede-io"
						placeholder-style="color: #666;font-size:26rpx;" placeholder="请填写您对本次物流配送的建议" />
				</view>

				<view class="dasdsa">
					<view class="footer" @click="submit"
						v-if="formData.deliveryEfficiency &&  formData.serviceAttitude ">
						<text class="dede-ioio"> 提交</text>
					</view>
					<view class="footer disabled"
						v-if="!formData.deliveryEfficiency  ||  !formData.serviceAttitude">
						<text class="dede-ioio"> 提交</text>
					</view>
				</view>
			</view>
			<view class="content-abc" v-if="status  == 2">
				<view class="pingjia-content">
					<view class="img-data">
						<image class="ic_submit" src="../../static/image/ic_submit@3x.png" mode=""></image>
					</view>
					<view class="ff">
						感谢您的评价！
					</view>
					<view class="ff-e">
						您的评价已提交，我们会根据您的意见进行改进
					</view>
				</view>
				<view class="card-list">
					<view class="card-title">
						您还有其他可评价的订单
					</view>
					<view class="card-maind-de">
						<template v-if="status  == 2 && datalist.length >0">
							<view class="sadasde" v-for="(item,index) of datalist" :key="index">
								<card :cardType="1" :row="item" @update="update($event,item,index)" />
							</view>
						</template>
						<template v-else>
							<view class="asdasd">
								<image class="asdasd-submit" src="../../static/image/empty@3x.png" mode=""></image>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<van-dialog v-model="show" confirm-button-color='#1973F7' show-confirm-button confirm-button-text="我知道了"
			@confirm="confirm">
			<view class="van-dialog-content">
				{{message}}
			</view>
		</van-dialog>
	</view>
</template>
<script>
	import card from '@/components/card.vue';
	import {
		getStoreDelivery,
		getEvaluate,
		getListStoreDelivery
	} from '../../api';
	import {
		handlerUrl,
		handlerUrlString,
		symbol,
		statusCar,
	} from "./config.js";
	export default {
		components: {
			card
		},
		data() {
			return {
				show: false,
				params: null,
				formData: {
					deliveryEfficiency: 0,
					serviceAttitude: 0,
					proposal: ""
				},
				result: {
					[1]: "非常差",
					[2]: "差",
					[3]: "一般",
					[4]: "满意",
					[5]: "非常满意",
				},
				status: 1,
				message: "",
				statusCar,
				rowCard: {
					type: 2
				},
				submitParams: null,
				datalist: [],
			};
		},
		onLoad() {},
		mounted() {
			this.initMessage(1);
		},
		methods: {
			update($event, item, index) {
				this.status = 1;
				this.formData = {
					deliveryEfficiency: 0,
					serviceAttitude: 0,
					proposal: ""
				}
				// 方式一
				let hash = window.location.hash;
				let url = hash.split(symbol)[1];
				let obj = handlerUrl(url);
				obj.shipOrderNo = item.shipOrderNo;
				window.location.hash = `?${handlerUrlString(obj)}`;
				// 方式二
				this.params.shipOrderNo = item.shipOrderNo;
				this.initMessage(2);
			},
			onChange(e, type) {
				console.log(e, type)
			},
			inputproposal(val) {
				// console.log(val,this.formData.proposal)
			},
			confirm() {
				console.log(this.show);
			},
			async getList(storeCode) {
				this.datalist = [];
				try {
					let {
						code,
						data
					} = await getListStoreDelivery({
						evaluateStatus: 1,
						storeCode,
						requestType: this.params.requestType
					});
					if (code == 200) {
						this.datalist = data;
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			async getStoreDeliveryInfo(params) {
				try {
					let {
						code,
						data
					} = await getStoreDelivery(params);
					if (code == 200) {
						this.rowCard = data;
						this.submitParams = this.handlerSummitParams(data);
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			handlerSummitParams(data) {
				let {
					driverId,
					driverMobile,
					driverName,
					shipOrderNo,
					storeCode,
					vehiclesCode,
					vehiclesId
				} = data;
				return {
					driverId,
					driverMobile,
					driverName,
					shipOrderNo,
					storeCode,
					vehiclesCode,
					vehiclesId,
					requestType: this.params.requestType
				}
			},
			async submitData(params, formData) {

				try {
					let {
						code,
						data
					} = await getEvaluate({
						...params,
						...formData
					})
					if (code == 200) {
						// console.log(data, "🚀🚀🚀🚀🚀🚀")
						this.status = 2;
						uni.setNavigationBarTitle({
							title: '提交成功'
						});
						this.getList(this.rowCard.storeCode);
					}
				} catch (e) {
					this.show = true;
					this.message = '🚀' + e.errMsg + '🚀';
					//TODO handle the exception e.errMsg
				}
			},
			async submit() {
				await this.submitData(this.submitParams, this.formData)
			},
			async initMessage(type) {
				try {
					const paraString = window.location.href;
					let url = '';
					if (type == 1) {
						if (paraString.indexOf(symbol) > 0) {
							url = paraString.split(symbol)[1];
							this.params = handlerUrl(url);
							this.getStoreDeliveryInfo(this.params);
						}
					}
					if (type == 2) {
						this.getStoreDeliveryInfo(this.params);
					}

				} catch (e) {
					console.log(e, 'eeee');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .van-button__content,
	.van-dialog-content {
		font-size: 24rpx;
	}

	.container {
		width: 100%;
		min-height: calc(100vh);
		background: linear-gradient(to bottom, #c6ddff 5%, #d0e3ff 10%, #f1f7ff 60%, #f3f8ff);
		position: absolute;
		top: 0;
		z-index: 2122;

		.van-dialog-content {
			display: flex;
			justify-content: center;
			padding: 48rpx 0;
			font-size: 28rpx;
			color: #333;
		}

		.postMessage {
			width: 260px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid;
		}

		.dasdsa {
			position: absolute;
			bottom: -180rpx;
			width: 100%;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.disabled {
				opacity: .5;
			}

			.footer {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 370rpx;
				height: 76rpx;
				background: #1973F7;
				border-radius: 200rpx;

				.dede-ioio {
					width: 60rpx;
					height: 40rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}
		}

		.main {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 2;
			padding: 30rpx 32rpx 0 32rpx;

			.content-abc {
				.pingjia-content {
					.img-data {
						display: flex;
						justify-content: center;
						align-items: center;

						.ic_submit {
							width: 160px;
							height: 160px;
						}
					}

					margin-top: 24px;
					// height: 12vh;
					// border: 2rpx solid;
					display: flex;
					flex-direction: column;
					align-items: center;

					.ff {
						height: 40rpx;
						font-weight: 550;
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
					}

					.ff-e {
						margin-top: 20rpx;
						height: 40rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #666;
						line-height: 40rpx;
					}
				}

				.card-list {
					display: flex;
					justify-content: center;
					margin-top: 40rpx;
					flex-direction: column;
					align-items: center;

					.card-title {
						height: 40rpx;
						font-weight: 550;
						font-size: 14px;
						color: #000000;
						line-height: 40rpx;
					}

					.card-maind-de {
						width: 100%;
						height: 60vh;
						// border: 2rpx  solid;
						overflow: scroll;
						margin-top: 20rpx;

						.asdasd {
							display: flex;
							justify-content: center;

							.asdasd-submit {
								width: 133px;
								height: 145px;
							}
						}

						.sadasde+.sadasde {
							margin-top: 12rpx;
						}
					}
				}
			}

			.content-a {
				position: relative;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				padding: 12rpx 28rpx 60rpx 28rpx;

				.class-ui {
					display: flex;
					margin-top: 40rpx;

					.flag {
						width: 80rpx;
						height: 40rpx;
						background-color: #DAFFF9;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.f {
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 550;
							font-size: 24rpx;
							color: #02B597;
						}
					}

					.class-ko {
						margin-left: 48rpx;

						.hj {
							height: 40rpx;
							font-weight: 550;
							font-size: 32rpx;
							color: #000000;
							line-height: 40rpx;
						}

						.hj-l {
							height: 40rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
							line-height: 40rpx;
						}
					}
				}

				.clasdsa {
					display: flex;
					margin-top: 50rpx;
					padding: 0;
					background-color: #F5F8FF;
					border-radius: 12rpx;
					padding: 28rpx 30rpx;

					.dede-io {
						height: 616rpx;
						outline: none;
						font-size: 26rpx;
					}
				}

				.xinghao {
					margin-top: 46rpx;

					.content-xing {
						margin-top: 16rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;
						}

						.tetxde {
							width: 110rpx;
							font-weight: 400;
							font-size: 25rpx;
							color: #1973F7;
						}

						.class-text {
							margin-right: 28rpx;
							font-weight: 550;
							font-size: 24rpx;
							color: #000000;
						}
					}
				}

				.title-content {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.cc {
						height: 40rpx;
						font-weight: 400;
						font-size: 24rpx;
						line-height: 40rpx;
					}

					.a {
						color: #000000;
					}

					.b {
						width: 144rpx;
						color: #A5A5A5;
					}

				}
			}
		}

		.dehjdede {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 1;
		}
	}
</style>